import { Card, Input, Form, Button, message } from "antd"
import logo from '@/assets/logo.png'
import { useNavigate } from "react-router-dom"
import { useDispatch } from "react-redux"
import { fetchLogin } from "@/store/modules/user"

const Login = () => {
    const dispatch = useDispatch()
    const navigate = useNavigate()
    /**
     * 提交表单
     * @param code应为 246810
     */
    const handleSubmit = async (data) => {
        await dispatch(fetchLogin(data))
        navigate('/')
        message.success('登录成功!')
    }
    return (
        <div className="login-page h-screen w-screen bg-contain">
            <Card className="bg-white rounded-md fixed top-1/2 left-1/2 shadow-lg -translate-x-1/2 -translate-y-1/2 pt-4 py-12">
                <img src={logo} alt="logo" className="w-36 h-36 mx-auto mb-4" />
                <Form className="w-96 pb-4" validateTrigger="onBlur" onFinish={handleSubmit} initialValues={{
                    mobile: '13911111111',
                    code: '246810'
                }}>
                    <Form.Item name="mobile" rules={[
                        {
                            required: true,
                            message: '请输入手机号'
                        },
                        {
                            pattern: /^1[3-9]\d{9}$/,
                            message: '请输入正确的手机号格式'
                        }
                    ]}>
                        <Input placeholder="请输入手机号" maxLength={11} />
                    </Form.Item>
                    <Form.Item name='code' rules={[
                        {
                            required: true,
                            message: '请输入验证码'
                        }
                    ]}>
                        <Input placeholder="请输入验证码" />
                    </Form.Item>
                    <Button type="primary" htmlType="submit" className="tracking-widest w-full h-10">登录</Button>
                </Form>
            </Card>
        </div>
    )
}

export default Login